<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            margin: 12px auto;
            width: 60%;
            position: relative;
        }
        .image {
            width: 150px;
        }
        .image-left {
            float: left;
        }
        .image-right {
            position: absolute;
            right: 0;
            z-index: -1;
        }

        .float-1 {
            float: left;
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>

</head>
<body>

<div class="container">
    <h2>文字环绕图片</h2>

    <image class="image image-left" src="http://ojjslhnls.bkt.clouddn.com/blog/20170110/130947563.png"></image>

    <div>
        AAAA我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
    </div>

    <div style="height: 32px;"></div>
    
    <image class="image image-right" src="http://ojjslhnls.bkt.clouddn.com/blog/20170110/130947563.png"></image>

    <div>
        AAAA我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
        我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。我是文字上岛咖啡，我是文字上岛咖啡，我是文字上岛咖啡。
    </div>

</div>

</body>
</html>